<template>
	<el-container>
		<el-main>
			<div style="width: 100%;height: 30px;">
				<div style="float: right;">
					<el-button type="primary" plain @click="showCode" size="mini">代码</el-button>
				</div>
			</div>

			<div ref="main" style="width: 600px;height:400px;border: 1px red solid;margin: 50px auto;"></div>

		</el-main>
		<el-aside width="400px">
			<el-collapse v-model="activeNames">

				<el-collapse-item title="标题" name="2">
					<el-tabs v-model="showTitleTab" type="card">
						<el-tab-pane label="整体" name="1">
							<div class="collapse-wrap">
								<div class="row">
									<div class="row-label">显示：</div>
									<el-switch v-model="option.title.show" @change="showChart">
									</el-switch>
								</div>
								<div class="row">
									<div class="row-label">水平位置：</div>
									<div class="row-content">
										<el-radio-group v-model="option.title.left" @input="showChart">
											<el-radio label="left">靠左</el-radio>
											<el-radio label="center">居中</el-radio>
											<el-radio label="right">靠右</el-radio>
										</el-radio-group>
									</div>
								</div>
								<div class="row">
									<div class="row-label">垂直位置：</div>
									<div class="row-content">
										<el-radio-group v-model="option.title.top" @input="showChart">
											<el-radio label="top">靠上</el-radio>
											<el-radio label="middle">居中</el-radio>
											<el-radio label="bottom">靠下</el-radio>
										</el-radio-group>
									</div>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="主标题" name="2">								
							<div class="row">
								<div class="row-label">主标题:</div>
								<div class="row-content">
									<el-input v-model="option.title.text" @input="showChart" size="mini"></el-input>
								</div>
							</div>
							<div class="row">
								<div class="row-label">字体粗细:</div>
								<div class="row-content">
									<el-select v-model="option.title.textStyle.fontWeight" size="mini" placeholder="请选择"
										@change="showChart">
										<el-option label="粗体字" value="bold"></el-option>
										<el-option label="普通" value="normal"></el-option>
										<el-option label="细体" value="lighter"></el-option>
									</el-select>
								</div>
							</div>
							<div class="row">
								<div class="row-label">字体大小:</div>
								<div class="row-content">
									<el-input-number v-model="option.title.textStyle.fontSize" @change="showChart"
										size="mini" :min="1"></el-input-number>
								</div>
							</div>
							<div class="row">
								<div class="row-label">字体颜色:</div>
								<div class="row-content">
									<el-color-picker v-model="option.title.textStyle.color" show-alpha
										@change="showChart" size="mini">
									</el-color-picker>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="副标题" name="3">
							<div class="row">
								<div class="row-label">副标题:</div>
								<div class="row-content">
									<el-input v-model="option.title.subtext" @input="showChart" size="mini"></el-input>
								</div>
							</div>
							<div class="row">
								<div class="row-label">超链接:</div>
								<div class="row-content">
									<el-input v-model="option.title.sublink" @input="showChart" size="mini"></el-input>
								</div>
							</div>
							<div class="row">
								<div class="row-label">字体粗细:</div>
								<div class="row-content">
									<el-select v-model="option.title.subtextStyle.fontWeight" size="mini"
										placeholder="请选择" @change="showChart" style="width: 100%;">
										<el-option label="粗体字" value="bold"></el-option>
										<el-option label="普通" value="normal"></el-option>
										<el-option label="细体" value="lighter"></el-option>
									</el-select>
								</div>
							</div>
							<div class="row">
								<div class="row-label">字体大小:</div>
								<div class="row-content">
									<el-input-number v-model="option.title.subtextStyle.fontSize" @change="showChart"
										size="mini" :min="1"></el-input-number>
								</div>
							</div>
							<div class="row">
								<div class="row-label">字体颜色:</div>
								<div class="row-content">
									<el-color-picker v-model="option.title.subtextStyle.color" show-alpha
										@change="showChart" size="mini">
									</el-color-picker>
								</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</el-collapse-item>
				<el-collapse-item title="温度配置" name="6">
					<div class="collapse-wrap">
						<div class="row">
							<div class="row-label">最小值：</div>
							<el-input-number @change="showChart" size="mini"
								v-model="option.series[0].min"></el-input-number>
						</div>
						<div class="row">
							<div class="row-label">最大值：</div>
							<el-input-number @change="showChart" size="mini"
								v-model="option.series[0].max"></el-input-number>
						</div>
						<div class="row">
							<div class="row-label">半径：</div>
							<el-input-number @change="changeRadius" size="mini"
								v-model="radius"></el-input-number>
						</div>
						<div class="row">
							<div class="row-label">轴线颜色：</div>
							<div class="row-content">
								<el-color-picker v-model="option.series[0].axisLine.lineStyle.color[0][1]" show-alpha
									@change="showChart" size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="row-label">轴线宽度：</div>
							<el-input-number @change="showChart" size="mini"
								v-model="option.series[0].axisLine.lineStyle.width"></el-input-number>
						</div>
						<div class="row">
							<div class="row-label">指针颜色：</div>
							<div class="row-content">
								<el-color-picker v-model="option.series[0].pointer.itemStyle.color" show-alpha
									@change="showChart" size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="row-label">显示进度条：</div>
							<el-switch v-model="option.series[0].progress.show" @change="showChart"></el-switch>
						</div>
						<div class="row">
							<div class="row-label">进度条颜色：</div>
							<div class="row-content">
								<el-color-picker v-model="option.series[0].progress.itemStyle.color" show-alpha
									@change="showChart" size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="row-label">进度条宽度：</div>
							<el-input-number @change="showChart" size="mini"
								v-model="option.series[0].progress.width"></el-input-number>
						</div>
					</div>
				</el-collapse-item>
			</el-collapse>
		</el-aside>
		<el-dialog title="代码" :visible.sync="codeDialogVisible" width="50%" :close-on-click-modal="false">
			<el-input type="textarea" :rows="10" v-model="codeTextarea">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="codeDialogVisible = false">关闭</el-button>
			</span>
		</el-dialog>
	</el-container>
</template>

<script>
	export default {
		data: function() {
			return {
				activeNames: ['1'],
				chart: null,
				codeDialogVisible: false, // 代码对话框
				codeTextarea: '', // 代码
				showTitleTab: '1',
				radius:75,// 半径
				option: {
					title: {
						show: true,
						text: 'ECharts 入门示例',
						subtext: '副标题',
						sublink: 'http://www.baidu.com',
						left: 'center',
						top: 'top',
						textStyle: {
							color: '#333',
							fontWeight: 'bold',
							fontSize: 18,
						},
						subtextStyle: {
							color: '#aaa',
							fontWeight: 'normal',
							fontSize: 12,
						}
					},
					series: [
					    {
					      type: 'gauge',
						  radius:'75%',
						  min:0, // 最小值
						  max:100, // 最大值
						  axisLine:{ // 轴线
							  lineStyle:{
								  width:10,
								  color:[[1, '#E6EBF8']],
								  // color: [
								  //     [0.1, 'red'], // 0~10% 红轴
								  //     [0.2, 'green'], // 10~20% 绿轴
								  //     [0.3, 'blue'], // 20~30% 蓝轴
								      
								  // ]
							  }
						  },
						  pointer:{ // 指针
							 itemStyle:{
								 color:"#5470c6",
							 }
						  },
						  progress:{ // 进度
							  show:false,
							  width:10,
							  itemStyle:{
								  color:'#5470c6'
							  } 
						  }, 
					      data: [
					        {
					          value: 50,
					          name: '温度',
							  itemStyle: { //该数值区域样式设置
								color: '#5470c6', //线、标记的颜色
							  }, 
							  lineStyle:{
								  width:2, // 线的宽度
							  },
					        },
					      ],
					    }
					  ]
				}
			}
		},
		mounted: function() {
			// 基于准备好的dom，初始化echarts实例
			this.chart = this.$echarts.init(this.$refs['main']);
			this.option.series[0].radius = this.radius+"%"
			// 使用刚指定的配置项和数据显示图表。
			this.chart.setOption(this.option);

		},
		methods: {
			// 移动位置等操作，重新设置即可
			showChart() {
				this.chart.setOption(this.option);
			},
			// 垂直柱状图改成水平柱状图，需要clear
			clearAndShowChart() {
				this.chart.clear() // 先清空，否则垂直柱状图不能切换成水平柱状图
				this.chart.setOption(this.option);
			},
			showCode() {
				this.codeDialogVisible = true
				this.codeTextarea = "option=" + JSON.stringify(this.option, function(key, val) {
					if (typeof val === 'function') {
						return val + '';
					}
					return val;
				}, '    ')
				console.log(JSON.stringify(this.option))
			},
			// 图例文字颜色设置为自动
			setLegendFontColorAuto(value) {
				console.log("value:", value)
				if (value) {
					this.option.legend.textStyle.color = 'auto'
					this.showChart()
				} else {
					this.option.legend.textStyle.color = this.legendFontColor
					this.showChart()
				}
			},
			setLegendFontColor(value) {
				this.option.legend.textStyle.color = value
				this.showChart()
			},
			changeTooltipUnitSwitch(value) { // 提示框是否显示单位的开关
				if (value) { // 显示单位
					this.inputTooltipUnit(this.tooltipUnit)
					this.showtooltipUnit = true
				} else if (value == false) { // 不显示单位
					delete this.option.tooltip['valueFormatter']
					this.showtooltipUnit = false
				}
				this.clearAndShowChart()
			},
			inputTooltipUnit(val) { // 提示框中的单位发生改变时
				if (this.tooltipUnitSwitch) {
					this.option.tooltip.valueFormatter = function(value) {
						return value + val
					}
				}
				this.showChart()
			},
			changeRadius(val){ // 修改外半径的事件
				this.option.series[0].radius = val+"%"
				this.showChart()
			},
		}
	}
</script>

<style scoped>
	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		padding: 0;
	}


	.el-container {
		height: 100%;
	}

	.collapse-wrap {
		text-align: left;
		margin: 0 10px;
	}

	.el-form-item {
		margin-bottom: 0px;
	}

	.row {
		display: flex;
		padding-bottom: 10px;
	}
	.row-label {
		display: inline-block;
		width: 80px;
		text-align: right;
		padding-right: 10px;
	}
	.row-content {
		display: inline-block;
		text-align: left;
		flex: 1;
	}

	
</style>